<template >
	<div class="contain-report">
		<div class="report-title">实验配方查看</div>
		<div class="report-search">
			<el-input style="width: 300px"
					  placeholder="请输入"
			>
				<i slot="suffix" class="el-input__icon el-icon-search" style="font-size: 20px"></i>
			</el-input>
		</div>
		<div class="report-title" style="font-size: 18px">基础配方</div>
		<div class="report-list" v-for="item in 3" :key="item">
			<div class="list-box">
				<h3 style="margin-bottom: 10px">配方A</h3>
				<span style="color: #999">这是配方A,主要描述XXXXX</span>
			</div>
			<div class="right">
				<div class="right-date">
					<span style="margin-bottom: 10px">上传时间:</span>
					<span>2017-10-01 12:00</span>
				</div>
				<div class="right-content">
					<span style="margin-bottom: 10px">版本:</span>
					<span>2023-2-2</span>
				</div>
				<div class="btns">
					<el-button type="text">下载</el-button>
				</div>
			</div>
		</div>
		<div class="report-page">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="3"
					:page-sizes="[100, 200, 300, 400]"
					:page-size="100"
					layout="sizes, prev, pager, next, jumper"
					:total="400">
			</el-pagination>
		</div>
	</div>
</template >

<script >
    export default {
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
    }
</script >

<style scoped lang="less">
	.contain-report {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		.report-title {
			font-size: 22px;
			color: #333;
		}
		.report-search{
			width: 100%;
			margin: 30px 0;
			padding: 0 5%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			/deep/.el-input__inner{
				border-radius: 20px;
			}
		}
		.report-list{
			width: 100%;
			margin: 20px 0;
			background-color: #fff;
			border-radius: 20px;
			box-shadow: 0 0 5px 0 #ccc;
			padding: 20px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.list-box{
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: flex-start;
			}
			.right{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.right-content{
					width: 10%;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-around;
					color: #999;
				}
				.right-date{
					width: 20%;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-around;
					color: #999;
				}
				.btns{
					width: 40%;
					padding: 0 5%;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
				}
			}
			
		}
		.report-page{
			position: absolute;
			bottom: 10px;
			left: 50%;
			width: 100%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
